目前比较流行的用户制作(UML、ERD、BPMN)的图表库有:

  • JointJS & Rappid(商业版本)
  • jsPlumb
  • GoJS
  • AntV G6

JointJS &Rappid(JointJS 的商业)

JointJS图表库，通过JavaScript和SVG为所有现代浏览器创建完全交互式的图表工具。MV体系结构将图形，元素和链接模型与它们的呈现分离开来，这使将JointJS轻松插入后端应用程序变得容易。 JointJS基于Backbone MVC库构建的，并依赖于jQuery和Lodash。

核心概念

每个概念分别对应view和model两种概念（前后分别是model和view概念）：

  • element,elementView 元素
  • link,linkView 连线
  • graph,paper 画布

jointJS中，视图和模型是分离的，不同概念的模型和视图之间是不能发生联系的，比如把元素添加到画布上，可以使用element.addTo(graph) 或者 graph.add(element) ，但是不能使用element.addTo(paper)这样的操作，因为element是model概念，而paper是视图概念，两者不能直接操作。

特点

  • 通过MV结构,修改modal自动更新View
  • 高度事件驱动，用户可自定义任何发生在 paper 下的事件响应
  • 可以导出JSON，也能通过JSON配置导入直接生成图形
  • 支持Node.js

缺点

  • 常用的缩放、画布拖拽、自动布局、交互式画图等功能都没有内置，需要自行编写（除非使用商业版）
  • 依赖Backbone,jQuery,Lodash

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!--
 * @Author: Fan
 * @Date: 2020-05-15 11:55:08
 * @description: 
 * @LastEditors: Fan
--> 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css"
    rel="external nofollow" rel="external nofollow" rel="external nofollow" />
</head>

<body>
  <!-- content -->
  <div id="myholder"></div>
  <!-- dependencies 通过CDN加载依赖-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
  <!-- code -->
  <script type="text/javascript">
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({
      el: document.getElementById('myholder'),
      model: graph,
      width: 600,
      height: 500,
      gridSize: 1
    });
    var rect = new joint.shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
      body: {
        fill: 'blue'
      },
      label: {
        text: 'Hello',
        fill: 'white'
      }
    });
    rect.addTo(graph);

    var rect2 = rect.clone();
    rect2.translate(300, 0);
    rect2.attr('label/text', 'World!');
    rect2.addTo(graph);
    var link = new joint.shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.addTo(graph);
  </script>
</body>

</html>

DEMO

3.1K MPL-2.0

jsPlumb

提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等工具.目前有社区版本和收费版(toolkit).

核心概念

  • Souce 源节点
  • Target 目标节点
  • Anchor 锚点 锚点位于源节点或者目标节点上
  • Endpoint 端点 端点位于连线上
  • Connector 连接 或者也可以理解是连接线
  • Overlays 可以理解为在连接线上的文字或者箭头之类

特点

  • 基于HTML+CSS绘制图形,也支持SVG.
  • 支持Angular,React,Vue

缺点

  • HTML+CSS导致难以模块复用代码.
  • 小地图,缩放功能,自动布局插件需要收费版本.

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!--
 * @Author: Fan
 * @Date: 2020-05-15 14:00:24
 * @description: 
 * @LastEditors: Fan
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsPlumb</title>
</head>
<style>
    #diagramContainer {
      padding: 20px;
      width: 80%;
      height: 400px;
      border: 1px solid gray;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      height: 80px;
      width: 80px;
      border: 1px solid blue;
    }
  
</style>
<body>
  <div id="diagramContainer">
    <div id="item_left" style="left: 29px; top: 91px;" class="item">Hello</div>
    <div id="item_right" style="left: 327px; top: 45px;" class="item">World</div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
  
  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle'
      })
      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>
</body>
</html>

DEMO

5.6k under both MIT and GPLv2.

GoJS

GoJS 通过自定义模板和布局来创建创建包含节点、连线、分组的复杂图表.

GoJS是一个MVVM模型，也就是Model模型同View视图的双向绑定，类似于AngularJS。View部分包括了整个图表Diagram风格的定义，节点Node的定义，和连线Link的定义.

它是使用Canvas进行图形的渲染.

核心概念

  • 图表（Diagram）

GoJS图表即最后看到的可视化视图，它是由这些部分构成的：一个或多个可能有连接关系的、可能成组的节点。所有这些节点和链路聚集在相同或不同的层中，并呈现出一定的布局（开发者预定好的或GoJS自动布局）。

  • 模型（Modal）

每个图表都有一个数据模型，用于保存和解释开发者程序的数据。

模型描述了节点之间的连接关系和组成员关系。图表自动为模型 Model.nodeDataArray 中的每个数据项创建一个节点或组， 为模型 GraphLinksModel.linkDataArray 中的每个数据项创建一个链接。而且，我们可以为每个数据对象添加所需的任何属性。

  • 模板（Template）

模板声明了每个节点或链路的外观、位置和行为。

  • 面板（Panel）

每个模板由GoJS中的面板Panel构成，面板本身作为一个图形对象GraphObject，保存其他图形对象作为它的元素，同时，面板需要负责图形对象的尺寸、位置。

每个面板建立自己的坐标系，面板中的元素按顺序绘制，从而确定了这些元素的z坐标。

图形对象属性与模型数据属性的数据绑定使得数据的每个节点或链接都是唯一的。

特点

  • 图形模板 以及 图形对象属性与模型数据的数据绑定, 数据驱动界面更新.
  • 官方提供不同图形领域的DEMO
  • 商业产品,购买后提供技术支持

缺点

  • 商业产品
  • 官方有中文文档但是大部分都是英文,文档并不友好.上手有难度.

Hello world

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--
 * @Author: Fan
 * @Date: 2020-05-15 14:48:52
 * @description: 
 * @LastEditors: Fan
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GoJS</title>
</head>
<body>
  <div id="myDiagramDiv" style="width:800px; height:500px; background-color:#DAE4E4;"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.36/go.js"></script>
  <script>
    var $ = go.GraphObject.make;
      var myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
          });

      // var myModel = $(go.Model);
    myDiagram.model = new go.GraphLinksModel(
      [ // a JavaScript Array of JavaScript objects, one per node;
        // the "color" property is added specifically for this app
        { key: "Hello", color: "lightblue" },
        { key: "World", color: "orange" },
      ],
      [ // a JavaScript Array of JavaScript objects, one per link
        { from: "Hello", to: "World" },
      ]);
      // myDiagram.model = myModel;
  </script>
</body>
</html>

DEMO

4.3K 授权使用

AntV G6

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。

特点

  • 支持Canvas和SVG两种渲染方式.
  • 中文文档,文档比较友好上手容易.

缺点

  • 只提供图形绘制能力,图形编辑能力需要自己另外开发.

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!--
 * @Author: Fan
 * @Date: 2020-05-15 15:44:36
 * @description: 
 * @LastEditors: Fan
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>G6</title>
</head>
<body>
  <div id="mountNode"></div>

  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
  <script>
    console.log(G6.Global.version);
    const initData = {
        // 点集
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200,
          label: 'Hello'
        }, {
          id: 'node2',
          x: 300,
          y: 200,
          label: 'World'
        }],
        // 边集
        edges: [
          {
            source: 'node1',
            target: 'node2',
          }
        ]
      };
      const graph = new G6.Graph({
          container: 'mountNode',
          width: 800,
          height: 500,
          modes: {
            default: ['drag-node'],
          },
          renderer: 'svg'
        });
      graph.data(initData);
      graph.render();
  </script>
  </html>
</body>
</html>

DEMO

6.3K MIT

上手难易程度(越高越难) 扩展性 可靠性 文档完善 功能完善
JointJS & Rappid 3 3 3 3
mxGraph 4 5 5 3 4
jsPlumb 2 3 4 2
GoJS 5 5 2
AntV 2 3 5 2